<mat-accordion displayMode="flat" [multi]="false" [hideToggle]="false" [@.disabled]="disableAnimation">
  <mat-expansion-panel [hideToggle]="false" *ngFor="let group of navGroups" routerLinkActive
    #rla="routerLinkActive" [expanded]="rla.isActive">
    <mat-expansion-panel-header>
      <mat-panel-title fxLayoutGap="8px" fxLayoutAlign="flex-start center">
        <mat-icon >{{ group.icon }}</mat-icon>
        <span>{{ group.name }}</span>
      </mat-panel-title>
      <mat-panel-description>
      </mat-panel-description>
    </mat-expansion-panel-header>

      <mat-nav-list *ngIf="group.items">
        <ng-container *ngFor="let item of group.items">
          <a mat-list-item *ngIf="!item.isExternalUrl" [routerLink]="item.url" routerLinkActive="list-item-link-active">
            <span matLine>{{ item.name }}</span>
          </a>
          <a mat-list-item *ngIf="item.isExternalUrl" target="_blank" [href]="item.url">
            <span matLine>{{ item.name }}</span>
          </a>
        </ng-container>
      </mat-nav-list>
  </mat-expansion-panel>
</mat-accordion>
